Experiment to rebuild Diffuse using web applets.
1---
2import { getCollection } from "astro:content";
3import AppletLayout from "../layouts/applet.astro";
4
5// Generate static paths
6export async function getStaticPaths() {
7 async function gen(path: string[]): Promise<{
8 applet: string;
9 title: string;
10 Component: (_props: Record<string, any>) => any;
11 }> {
12 let Applet;
13 let manifest;
14
15 if (path.length === 2) {
16 Applet = await import(`../applets/${path[0]}/${path[1]}/applet.astro`);
17 manifest = await import(`../applets/${path[0]}/${path[1]}/manifest.json`);
18 }
19
20 if (path.length === 3) {
21 Applet = await import(`../applets/${path[0]}/${path[1]}/${path[2]}/applet.astro`);
22 manifest = await import(`../applets/${path[0]}/${path[1]}/${path[2]}/manifest.json`);
23 }
24
25 if (path.length === 4) {
26 Applet = await import(`../applets/${path[0]}/${path[1]}/${path[2]}/${path[3]}/applet.astro`);
27 manifest = await import(
28 `../applets/${path[0]}/${path[1]}/${path[2]}/${path[3]}/manifest.json`
29 );
30 }
31
32 if (Applet === undefined || manifest === undefined) {
33 throw new Error("Unsupported path length");
34 }
35
36 return {
37 applet: path.join("/"),
38 title: manifest.default.title || manifest.default.name,
39 Component: Applet.default,
40 };
41 }
42
43 const applets = await getCollection("applets");
44 const pages = await Promise.all(
45 applets.map((applet) => {
46 return gen(applet.id.split("/").slice(0, -1));
47 }),
48 );
49
50 return pages.map(({ applet, Component, title }) => {
51 return {
52 params: { applet },
53 props: { Component, title },
54 };
55 });
56}
57
58// Render props
59const { Component, title } = Astro.props;
60---
61
62<AppletLayout title={title}>
63 <Component />
64</AppletLayout>